<template>
    <div class="container">
      <div
          id="map"
          ref="map"
          style="width: 100%; position: absolute; top: 0"
      ></div>
      <div class="back" style="float: right;font-weight: 400;" @click="backInit1" v-show="back">返回</div>
      <div class="back" style="float: right;font-weight: 400;" @click="backInit2" v-show="back2">返回</div>
      <div v-show="showVisible" class="visibleBox">
        {{ init2City }}
      </div>
<!--项目数量提示框-->
      <div class="tooltip">
        <div style="display: flex;margin-bottom: 8px;align-items: center"><div class="color" style="background:#1697ED;"></div><div>0~5个项目</div></div>
        <div style="display: flex;margin-bottom: 8px;align-items: center"><div class="color" style="background:#225AB7;"></div><div>6~10个项目</div></div>
        <div style="display: flex;margin-bottom: 8px;align-items: center"><div class="color" style="background:#00D680;"></div><div>11~15个项目</div></div>
        <div style="display: flex;margin-bottom: 8px;align-items: center"><div class="color" style="background:#FFAE1E;"></div><div>16~20个项目</div></div>
        <div style="display: flex;align-items: center"><div class="color" style="background:#FF5021;"></div><div>大于20个项目</div></div>
      </div>
<!--      各个区域项目详情悬浮弹窗-->
      <div class="projectD" v-show="projectShow">
        <project-dialog :cityName="cityName" ></project-dialog>
      </div>
      <div style="display: none">
        <div ref="projectInfo" >
          <WindowInfo :data="projectInfo" @closeInfoWindow="closeInfoWindow"></WindowInfo>
        </div>
      </div>

    </div>
</template>
<script>
// import {searchById} from "@/api/map";
import { searchById,bydialogList} from "@/api/map";
const {AMap} = window;
const MAP_STYLE = 'amap://styles/3efe3caae4d86d89083fd8e4e911a826';
import WindowInfo from "@/components/windowInfo/index.vue";
import projectDialog from "@/views/manageArea/component/projectDialog.vue";
export default {
  components: {
    projectDialog,
    WindowInfo
  },
  data() {
    return {
      projectShow:false,
      cityName:'',
      markers: [],
      customerDetail: {},
      projectDetail:{},
      isCustomShow: true,
      init2City: '',
      showVisible: false,
      zoom: 8,
      center: [120.050953, 29.096352],
      map: null,
      back: false,
      back2: false,
      topBox: [],
      projectInfo: {},
      lowerCityData: {},
      areaData: [
          {
        "name": "婺城区",
        "level": 3,
        "center": {
          "Q": 28.997297,
          "R": 119.509876,
          "lng": 119.504383,
          "lat": 28.978077
        },
      },
        {
          "name": "金东区",
          "level": 3,
          "center": {
            "Q": 29.124539,
            "R": 119.802387,
            "lng": 119.802387,
            "lat": 29.124539
          },
        },
        {
          "name": "武义县",
          "level": 3,
          "center": {
            "Q": 28.703804,
            "R": 119.682911,
            "lng": 119.682911,
            "lat": 28.703804
          },
        },
        {
          "name": "浦江县",
          "level": 3,
          "center": {
            "Q": 29.451254,
            "R": 119.89336300000002,
            "lng": 119.893363,
            "lat": 29.451254
          },
        },
        {
          "name": "磐安县",
          "level": 3,
          "center": {
            "Q": 28.978077,
            "R": 120.564564,
            "lng": 120.564564,
            "lat": 28.978077
          },
        },
        {
          "name": "兰溪市",
          "level": 3,
          "center": {
            "Q": 29.210065,
            "R": 119.46052099999997,
            "lng": 119.460521,
            "lat": 29.210065
          },
        },
        {
          "name": "义乌市",
          "level": 3,
          "center": {
            "Q": 29.306863,
            "R": 120.07491099999999,
            "lng": 120.074911,
            "lat": 29.306863
          },

        },
        {
          "name": "东阳市",
          "level": 3,
          "center": {
            "Q": 29.262546,
            "R": 120.23334,
            "lng": 120.298145,
            "lat": 29.17731
          },

        },
        {
          "name": "永康市",
          "level": 3,
          "center": {
            "Q": 28.899959,
            "R": 120.134724,
            "lng": 120.134724,
            "lat": 28.899959
          },
        }],
      areaDataShen: [
        {
          "name": "杭州市",
          "level": 3,
          "center": {
            "Q": 28.997297,
            "R": 119.509876,
            "lng": 119.454945,
            "lat": 29.926424
          },
        },
        {
          "name": "宁波市",
          "level": 3,
          "center": {
            "Q": 29.124539,
            "R": 119.802387,
            "lng": 121.591786,
            "lat": 29.673785
          },
        },
        {
          "name": "温州市",
          "level": 3,
          "center": {
            "Q": 28.703804,
            "R": 119.682911,
            "lng":120.570057,
            "lat": 27.960494
          },
        },
        {
          "name": "嘉兴市",
          "level": 3,
          "center": {
            "Q": 29.451254,
            "R": 119.89336300000002,
            "lng": 120.767811,
            "lat": 30.623781
          },
        },
        {
          "name": "湖州市",
          "level": 3,
          "center": {
            "Q": 28.978077,
            "R": 120.564564,
            "lng": 119.949329,
            "lat": 30.756048
          },
        },
        {
          "name": "绍兴市",
          "level": 3,
          "center": {
            "Q": 29.210065,
            "R": 119.46052099999997,
            "lng": 120.657948,
            "lat": 29.788266
          },
        },
        {
          "name": "金华市",
          "level": 3,
          "center": {
            "Q": 29.306863,
            "R": 120.07491099999999,
            "lng": 119.910877,
            "lat": 29.137818
          },

        },
        {
          "name": "衢州市",
          "level": 3,
          "center": {
            "Q": 29.262546,
            "R": 120.23334,
            "lng": 118.746327,
            "lat": 28.964945
          },

        },
        {
          "name": "舟山市",
          "level": 3,
          "center": {
            "Q": 28.899959,
            "R": 120.134724,
            "lng": 122.132862,
            "lat": 30.07152
          },
        },
        {
          "name": "台州市",
          "level": 3,
          "center": {
            "Q": 28.899959,
            "R": 120.134724,
            "lng": 121.270435,
            "lat": 28.779746
          },
        },
        {
          "name": "丽水市",
          "level": 3,
          "center": {
            "Q": 28.899959,
            "R": 120.134724,
            "lng": 119.688404,
            "lat": 28.287502
          },
        }
        ]
    }
  },
  mounted() {
    this.initMap()
  },
  created() {
    // this.projectColor()
  },
    methods: {
    // async projectColor(){
    //   const res=await projectColor("1701794131918761986",{
    //     createTimeEd:"2023-10-1 00:00:00",
    //     createTimeSt:"2020-10-1 00:00:00",
    //   })
    //   console.log(res,5555555555)
    // },
      closeInfoWindow() {
        this.map.clearInfoWindow();
      },
      markerClick(item, position) {
        let infoWindowData = new AMap.InfoWindow({
          isCustom: true, //使用自定义窗体
          content:this.$refs.projectInfo,
          offset: new AMap.Pixel(-9, -23),
          autoMove: true
        });
        infoWindowData.open(this.map, position);

      },
      // 最后一层打点
      async lastMapPoint(name){
      const res=await searchById({keyWord:name})
        if(res.result){
          const res1=await bydialogList(res.result[0].id)
          res1.result.records.forEach(item => {
            let  icon = item.projectSchedule == 9 ? 'point_blue' : 'point_yellow'
            this.addMarker([item.longitude, item.latitude], item, icon)
          })
        }
      },
      backInit1() {
        this.map.clearMap()
        this.back = false
        this.isCustomShow = true
        this.initAreaMap()
      },
      backInit2() {
        this.map.clearMap()
        this.back2 = false
        this.isCustomShow = true
        this.initAreaMap2()
      },
      initAreaMap() {
        this.showVisible = false
        this.map.setCenter(this.center);
        this.map.setZoom(this.zoom);
        // let zjName = ['舟山市','宁波市','温州市','嘉兴市']
        let zjName = ['衢州市','舟山市','台州市','丽水市','杭州市','宁波市','温州市','嘉兴市','湖州市','绍兴市','金华市']
        zjName.forEach(item=>{
          this.init1(item)
        })
      },
      initAreaMap2() {
        this.showVisible = false
        this.map.setCenter(this.center);
        this.map.setZoom(this.zoom);
        // let zjName = ['舟山市','宁波市','温州市','嘉兴市']
        let jhName = ['婺城区', '浦江县', '磐安县', '金东区', '永康市', '武义县', '义乌市', '兰溪市', '东阳市']
        jhName.forEach(item => {
          this.init3(item)
            this.projectShow=false
        })
      },
      initMap() {
        this.map = new AMap.Map('map', {
          resizeEnable: true, // 是否监控地图容器尺寸变化
          center: this.center, // 初始地图中心点
          zoom: this.zoom, // 初始地图级别
          zooms: [3, 23],
          zoomEnable: true,
          dragEnable: true,
          polygon: '',
          labelzIndex: 0,
          // pitch: 40, // 地图俯仰角度，有效范围 0 度- 83 度
          mapStyle: MAP_STYLE,
          // layers: [new AMap.TileLayer.Satellite()],
          // rotation: 34,
          viewMode: '2D',
        });
        // 任意点击地图某一点可以拿到经纬度
        // this.map.on("click", (e) => {
        //   // console.log(e)
        //   console.log(e.lnglat.lng + ",", e.lnglat.lat);
        // });
        this.initAreaMap()

        // this.init1()
        // this.map.on('click', (e) => {
        //   console.log(e)
        //   console.log(e.lnglat.lng + ',', e.lnglat.lat);
        // });
        this.map.on('complete', () => {
          // this.areaMarker()
        });
      },
      init1(city = '浙江省') {//区域遮盖
        var that = this
        // if (that.polygon) {
        //   that.map.remove(that.polygon)
        // }
        AMap.plugin('AMap.DistrictSearch', function () {
          new AMap.DistrictSearch({
            extensions: 'all',
            subdistrict: 0
          }).search(city, function (status, result) {// 外多边形坐标数组和内多边形坐标数组
            // var outer = [
            //   new AMap.LngLat(-360, 90, true),
            //   new AMap.LngLat(-360, -90, true),
            //   new AMap.LngLat(360, -90, true),
            //   new AMap.LngLat(360, 90, true)
            // ]
            var holes = result.districtList[0].boundaries
            // var pathArray =city=='浙江省'? [outer]:[]
            var pathArray = []
            pathArray.push.apply(pathArray, holes)
            that.polygon = new AMap.Polygon({
              pathL: pathArray,
              strokeColor: '#00ffd9',//城市边界颜色
              strokeWeight: 2,
              bubble: false,
              // 冒泡
              // fillColor: '#061322', // 遮罩背景色黑色
              fillColor: '#1695ef', // 遮罩背景色黑色
              fillOpacity: city=='浙江省'?0.8: 0.9
            })
            //多边形覆盖物上点击显示窗体;
            that.polygon.on('click', function (e) {
              // openInfo(e.lnglat);
              console.log('click',city,e.lnglat)
              that.init2(city, [e.lnglat.lng, e.lnglat.lat],10)
              if(city=='金华市'){
                that.initAreaMap2()
                // let jhName = ['婺城区','浦江县','磐安县','金东区','永康市','武义县','义乌市','兰溪市','东阳市']
                // jhName.forEach(item=>{
                //   that.init3(item)
                //   that.projectShow=false
                //   that.lastMapPoint(item)
                // })
              }
            });
            //鼠标高亮效果
            that.polygon.on('mouseover', function (e) {
              // that.polygon.setOptions({
              //   fillColor: '#FFB800',
              // })
              console.log('mouseover',city,e)
              that.projectShow=true
              that.cityName=city
            });

            that.polygon.on('mouseout', function (e) {
              console.log('mouseout',city,e)
                 that.projectShow=false
            });
            that.polygon.setPath(pathArray)
            that.map.add(that.polygon)
          })
        })
      },
      init3(city) {//区域遮盖
        var that = this
        // if (that.polygon) {
        //   that.map.remove(that.polygon)
        // }
        AMap.plugin('AMap.DistrictSearch', function () {
          new AMap.DistrictSearch({
            extensions: 'all',
            subdistrict: 0
          }).search(city, function (status, result) {// 外多边形坐标数组和内多边形坐标数组
            // var outer = [
            //   new AMap.LngLat(-360, 90, true),
            //   new AMap.LngLat(-360, -90, true),
            //   new AMap.LngLat(360, -90, true),
            //   new AMap.LngLat(360, 90, true)
            // ]
            var holes = result.districtList[0].boundaries
            // var pathArray =city=='浙江省'? [outer]:[]
            var pathArray = []
            pathArray.push.apply(pathArray, holes)
            that.polygon = new AMap.Polygon({
              pathL: pathArray,
              strokeColor: '#00ffd9',//城市边界颜色
              strokeWeight: 2,
              bubble: false,
              // 冒泡
              // fillColor: '#061322', // 遮罩背景色黑色
              fillColor: '#1695ef', // 遮罩背景色黑色
              fillOpacity: city=='浙江省'?0.8: 0.9
            })

            //多边形覆盖物上点击显示窗体;
            that.polygon.on('click', function (e) {
              // openInfo(e.lnglat);
              console.log('click',city,e.lnglat)
              that.init2(city, [e.lnglat.lng, e.lnglat.lat],11)
              that.projectShow=false
              that.lastMapPoint(city)
            });
            //鼠标高亮效果
            that.polygon.on('mouseover', function (e) {
              // that.polygon.setOptions({
              //   fillColor: '#FFB800',
              // })
              console.log('mouseover',city,e)
              that.projectShow=true
              that.cityName=city
            });

            that.polygon.on('mouseout', function (e) {
              console.log('mouseout',city,e)
              that.projectShow=false
            });
            that.polygon.setPath(pathArray)
            that.map.add(that.polygon)
            that.map.setZoom(10);
          })
        })
      },
      init2(city = '', center,islastDot) {//区域遮盖
        this.back = true
        this.showVisible = true
        this.init2City = city
        // let idObj = this.bubbleData.find(obj => obj.city == city)
        // this.getlowerCityData(idObj.id)
        var that = this
        console.log(city)
        console.log(that.polygon)
        // if (that.polygon) {
        //   that.map.remove(that.polygon)
        // }
        if(islastDot==11){
          this.lastMapPoint(city)
          this.back2=true

        }
        this.map.clearMap()
        AMap.plugin('AMap.DistrictSearch', function () {
          new AMap.DistrictSearch({
            extensions: 'all',
            subdistrict: 0
          }).search(city, function (status, result) {// 外多边形坐标数组和内多边形坐标数组
            var outer = [
              new AMap.LngLat(-360, 90, true),
              new AMap.LngLat(-360, -90, true),
              new AMap.LngLat(360, -90, true),
              new AMap.LngLat(360, 90, true)
            ]
            var holes = result.districtList[0].boundaries
            var pathArray = [outer]
            // var pathArray = []
            pathArray.push.apply(pathArray, holes)
            that.polygon = new AMap.Polygon({
              pathL: pathArray,
              strokeColor: '#00ffd9',//城市边界颜色
              strokeWeight: 2,
              bubble: true,
              // 冒泡
              fillColor: '#061322', // 遮罩背景色黑色
              fillOpacity: 0.8
            })
            that.polygon.setPath(pathArray)
            that.map.add(that.polygon)
            that.map.setCenter(center);
            that.map.setZoom(islastDot);
          })
        })
      },
      addMarker(position, item, icon) {
        // console.log(this)
        // console.log(this.bubbleData)
        let iconUrl = require(`@/assets/map/${icon}.png`)
        let marker = new AMap.Marker({
          // position: [119.644968,29.083458],
          position,
          map: this.map,
          extData: {
            item
          },
          cursor: 'pointer',
          icon: new AMap.Icon({
            image: iconUrl,
            size: new AMap.Size(20, 25),  //图标大小
            imageSize: new AMap.Size(20, 25)
          }),

          // offset: new AMap.Pixel(40,60),
          // anchor: 'bottom-center'
          anchor: 'top-center'

        });
        marker.setMap(this.map);
        this.markers.push(marker)
        let that = this
        AMap.event.addListener(marker, 'click', function (e) {
          let item = e.target.getExtData().item
          that.markerClick(item, [item.longitude, item.latitude])
          that.projectInfo=item
          // that.markerClick(e.target.getExtData().id, e.lnglat)
          console.log(e.target.getExtData().item)

        });

      }
    },

  destroyed() {

  }
}
</script>
<style scoped lang="scss">

.container {
  position: relative;
  min-width: 1024px;
  max-width: 1920px;
  height: 1080px;
  #map {
    height: 1080px;
  }
.back{
  width: 64px;
  height: 28px;
  text-align: center;
  line-height: 28px;
  position: absolute;
  font-weight: 400;
  cursor: pointer;
  top: 50px;
  right: 104px;
  z-index: 1000;
  background: rgba(0,152,255,0.2);
  box-shadow: inset 0px 0px 8px 0px #05A1FF;
  border-radius: 2px;
  border: 1px solid #09D2FF;
}
  .text {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 24px;
  }
.tooltip{
  position: absolute;
  bottom: 130px;
  right: 48px;
  width: 136px;
  height: 159px;
  background: rgba(0,37,60,0.8);
  box-shadow: inset 0px 0px 20px 0px #05A1FF;
  border-radius: 2px;
  border: 1px solid #09D2FF;
  font-size: 14px;
  padding: 15px;
  .color{
    width: 14px;
    height: 8px;
    border-radius: 1px;
    margin-right: 3px;
  }
}
  .projectD{
    position: absolute;
    top: -5px;
    left: -5px;

  }
}
::v-deep .amap-marker-label {
  background-color: unset;
  border: unset;
  pointer-events: none;
}

</style>
